<template>
  <div class="app-container" style="padding:1vh 4vw">
    <div class="tab-container" style="margin: 6vh 2vw;">
      <el-table highlight-current-row fit border :data="permissionsList" style="width:100%" max-height="800" tooltip-effect="light" :size="handleSize()">
        <el-table-column fixed sortable prop="id" label="ID" max-width="200" min-width="100" />
        <el-table-column prop="name" label="权限名" max-width="200" min-width="100" />
        <el-table-column prop="description" align="header-center" label="权限描述" max-width="400" min-width="350"/>
        <el-table-column prop="data" label="权限标识" max-width="200" min-width="150">
          <template v-slot="scope">
            <div @click="$router.push({path: scope.row.data})">
              {{ scope.row.data }}
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="display: flex;justify-content: center;margin-top: 5vh">
        <el-col :xs="18" :sm="12" :md="12" :lg="8" :xl="6" style="display: flex;justify-content: center">
          <el-pagination
            v-show="total>0"
            background
            hide-on-single-page
            :current-page.sync="currentPage"
            :page-size="perPage"
            :pager-count="5"
            layout="prev, pager, next"
            @prev-click="change"
            @next-click="change"
            @current-change="change"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {indexPermission} from "@/api/admin/permission";

const defaultPermission = {
  id: '',
  name: '',
  description: '',
  data: ''
}

export default {
  data() {
    return {
      currentPage: 1,
      lastPage: 0,
      total: 0,
      perPage: 0,
      permission: Object.assign({}, defaultPermission),
      permissionsList: []
    }
  },
  created() {
    // 从服务器端获取 权限列表
    this.getPermissions()
    this.currentPage = 1;
  },
  methods: {
    // 获取权限列表
    async getPermissions() {
      console.log(this.currentPage)
      const res = await indexPermission({page: this.currentPage})
      this.permissionsList = res.data.data
      this.currentPage = res.data.currentPage
      this.lastPage = res.data.lastPage
      this.total = res.data.total
      this.perPage = res.data.perPage
    },
    // 获取当前设备
    device() {
      return this.$store.state.app.device
    },
    // 根据当前设备 控制尺寸
    handleSize() {
      return this.$store.state.app.device === 'mobile' ? 'mini' : 'medium'
    },
    // 分页
    change(e) {
      this.currentPage = e;
      this.getPermissions();
    },
  }
}
</script>

<style scoped lang="scss">
.app-container {
  //margin-top: 30px;
  //margin-left: 2rem;
  //margin-right: 2rem;
  //border-radius: 15px;
  //box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
</style>

<!--, {-->
<!--id: 2,-->
<!--name: '用户管理',-->
<!--description: '/admin/user',-->
<!--data: 'admin.user.*'-->
<!--}, {-->
<!--id: 3,-->
<!--name: '活动管理',-->
<!--description: '/admin/activity/management',-->
<!--data: 'admin.activity.management.*'-->
<!--}, {-->
<!--id: 4,-->
<!--name: '活动发布',-->
<!--description: '/admin/activity/publish',-->
<!--data: 'admin.activity.publish.*'-->
<!--}, {-->
<!--id: 5,-->
<!--name: '活动记录',-->
<!--description: '/admin/activity/user',-->
<!--data: 'admin.activity.user.*'-->
<!--}-->

<!--{-->
<!--id: 1,-->
<!--name: '管理员管理',-->
<!--description: '/admin/admin',-->
<!--data: 'admin.admin.*'-->
<!--}-->
